<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>网站后台管理界面1</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="../static/css/administer.css" th:href="@{/css/administer.css}" rel="stylesheet" type="text/css">
    <script src="../static/js/usermanage.js" th:src="@{/js/usermanage.js}"></script>
    <link rel="shortcut icon" href="../static/img/logo.png" th:href="@{/img/logo.png}" type="image/x-icon"/>

</head>
<body>

<div class="container-fluid col-md-10 col-md-offset-1" style="margin-top: 5px">
    <!-- .navbar-static-top 去掉了由 .navbar-default 设置的左、右和顶部的边框，让它看起来更适合放在页面的头部。-->
    <nav class="navbar navbar-default navbar-static-top">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">网站后台管理</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target="#login">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button class="navbar-toggle" data-toggle="collapse" data-target="#leftbar">
                <span>设置</span>
            </button>
        </div>
        <!--侧边栏 -->
        <div class="navbar-collapse collapse" id="leftbar">
            <ul class="nav" id="mz">
                <li class="panel panel-default">
                    <a href="#sys" data-toggle="collapse"  data-parent="#mz">系统功能<span
                            class="glyphicon glyphicon-chevron-right pull-right"></span></a>
                    <ul class="panel-collapse collapse nav" id="sys">
                        <li><a href="#art1" data-toggle="tab">医生认证</a></li>
                        <li><a href="#art2" data-toggle="tab">用户管理</a></li>
                    </ul>
                </li>
                <li class="panel panel-default">
                    <a href="#art" data-toggle="collapse" data-parent="#mz">文章管理<span
                            class="glyphicon glyphicon-chevron-right pull-right"></span></a>
                    <ul class="panel-collapse collapse nav" id="art">
                        <li><a href="#art3" data-toggle="tab">疾病管理</a></li>
                        <li><a href="#art4" data-toggle="tab">用户管理</a></li>
                    </ul>
                </li>
                <li class="panel panel-default">
                    <a href="#other" data-toggle="collapse" data-parent="#mz">其他<span
                            class="glyphicon glyphicon-chevron-right pull-right"></span></a>
                    <ul class="panel-collapse collapse nav" id="other">

                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <!--右边主要区域 -->
    <div class="page-right">
        <div class="row">
            <div class="col-sm-12">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="art1">
                        <div class="panel panel-default">
                            <div class="panel-heading doctitle">
                                医生认证
                            </div>
                            <div id="outerdiv"
                                 style="position:fixed;top:0;left:0;z-index:2;width:100%;height:100%;display:none;">
                                <div id="innerdiv" style="position:absolute;">
                                    <img id="bigimg" style="border:5px solid #000000;" src=""/>
                                </div>
                            </div>
                            <div class="panel-body">
                                <table class="table table-striped table-hover table-responsive">
                                    <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>姓名</th>
                                        <th>专业</th>
                                        <th>认证信息</th>
                                        <th>地址</th>
                                        <th>联系</th>
                                        <th>状态</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="doctor:${doctors}">
                                        <td th:text="${doctor.getId()}">01</td>
                                        <td th:text="${doctor.getDocname()}">闵续</td>
                                        <td th:text="${doctor.getDiseasename()}">强迫症</td>
                                        <td>
                                            <img src="../static/img/login/male.png" th:src="@{/img/login/male.png}"
                                                 width="25px" height="25px" class="pic">
                                        </td>
                                        <td th:text="${doctor.getWorkplace()}">江西</td>
                                        <td th:text="${doctor.getPhone()}">123123</td>
                                        <td>
                                            <div th:if="${doctor.getIsallow()==1}">
                                                <input type="button" class="btn btn-info btn-xs" value="撤销"
                                                       th:onclick="admit(0,[[${doctor.getId()}]])"/>
                                            </div>
                                            <div th:if="${doctor.isallow==2}">
                                                <input type="button" class="btn btn-warning btn-xs" value="认证"
                                                       th:onclick="admit(1,[[${doctor.getId()}]])"/>
                                                <input type="button" class="btn btn-info btn-xs" value="拒绝"
                                                       th:onclick="admit(0,[[${doctor.getId()}]])"/>
                                            </div>
                                            <div th:if="${doctor.isallow==0}">
                                                <input type="button" class="btn btn-warning btn-xs" value="认证"
                                                       th:onclick="admit(1,[[${doctor.getId()}]])"/>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="art2">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                用户管理
                            </div>
                            <div class="col-sm-10">
                                <input type="button" class="btn btn-info" value="批量删除" onclick="dels()"/>
                                <input type="button" class="btn btn-info" value="全选" onclick="invert()"/>
                                <input type="button" class="btn btn-info" value="增加" data-toggle="modal"
                                       data-target="#adduser" onclick="change()"/>

                            </div>
                            <div class="panel-body">
                                <table class="table table-striped table-hover table-responsive" id="table1">
                                    <thead>
                                    <tr>
                                        <th><input type="checkbox" onclick="selectchecked(this)" id="chk">全选</th>
                                        <th>姓名</th>
                                        <th>年龄</th>
                                        <th>性别</th>
                                        <th>地址</th>
                                        <th>等级</th>
                                        <th>邮箱</th>
                                        <th>用户类型</th>
                                        <th>状态</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><input type="checkbox" name="checkbox" onclick="cancel()"></td>
                                        <td>mx</td>
                                        <td>11</td>
                                        <td>女</td>
                                        <td>背景</td>
                                        <td>1</td>
                                        <td>177.0</td>
                                        <td>普通用户</td>
                                        <td>
                                            <input type="button" class="btn btn-info" value="删除" onclick="del(this)"/>
                                            <input type="button" class="btn btn-info" value="修改" onclick="upda(this)"
                                                   data-toggle="modal"
                                                   data-target="#adduser"/>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="adduser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">修改个人信息</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label">昵称</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" id="name" placeholder="请输入昵称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="age" class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" id="age" placeholder="请输入年龄">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="age" class="col-sm-2 control-label">等级</label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" id="level" placeholder="请输入等级">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="address" class="col-sm-2 control-label">地址</label>
                                <div class="col-sm-10">
                                    <div class="col-md-4">
                                        <select style="margin-bottom:15px;" class="form-control" id="province">
                                            <option value="none">----请选择----</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <select class="form-control" id="city">
                                            <option value="none">----请选择----</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4"><input type="text" class="form-control" id="address"
                                                                 placeholder="请输入地址"></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">性别</label>
                                <div class="col-md-5">
                                    <div class="radio-inline">
                                        <input type="radio" name="sex" id="man" value="男" checked/>男
                                    </div>
                                    <div class="radio-inline">
                                        <input type="radio" name="sex" id="woman" value="女"/>女
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">用户类型</label>
                                <div class="col-md-5">
                                    <div class="radio-inline">
                                        <input type="radio" name="ty" id="user" value="普通用户" checked/>普通用户
                                    </div>
                                    <div class="radio-inline">
                                        <input type="radio" name="ty" id="doctor" value="医生"/>医生
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <input type="button" id="in_add" value="提交" class="btn btn-primary btn-sm"
                                           onclick="addname()">
                                    <input type="button" id="bu_update" value="修改" class="btn btn-primary btn-sm"
                                           onclick="update()" style="display: none">
                                </div>
                            </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
</div>

<script>
    //图片放大
    var x;
    $(function () {
        $(".pic").click(function () {
            var _this = $(this);//将当前的pimg元素作为_this传入函数
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        });
    });

    function imgShow(outerdiv, innerdiv, bigimg, _this) {
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性
        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function () {
            var windowW = $(window).width();//获取当前窗口宽度
            var windowH = $(window).height();//获取当前窗口高度
            var realWidth = this.width;//获取图片真实宽度
            var realHeight = this.height;//获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
            if (realHeight > windowH * scale) {//判断图片高度
                imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
                if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW * scale;//再对宽度进行缩放
                }
            } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", 200);//以最终的宽度对图片缩放
            var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
            var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
            $(innerdiv).css({"top": h, "left": w});//设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        });
        $(outerdiv).click(function () {//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }

    function selectchecked(chk) {
        $(":checkbox[type=checkbox]").prop("checked", chk.checked)
    }

    //取消全选
    function cancel() {
        var qwe = document.getElementById("chk")
        var list = document.getElementsByName("checkbox");
        flag = true;
        for (var i = 0; i < list.length; i++) {
            if (!list[i].checked) {
                flag = false;
            }
            qwe.checked = flag;
        }
    }

    //删除
    function del(ck) {
        $(ck).parent().parent().remove();
        sort();
    }

    //批量删除
    function dels() {
        if (flagr()) {
            if (confirm("确定要删除吗?")) {
                $(":checkbox[name=checkbox]:checked").parent().parent().remove();
                sort();
            }
        }
    }

    function flagr() {
        if ($(":checkbox[name=checkbox]:checked").length == 0) {
            console.log("至少选中一项");
            return false;
        } else {
            return true;
        }
    }

    //全选
    function invert() {
        var list = document.getElementsByTagName("input");
        for (var i = 0; i < list.length; i++) {
            list[i].checked = !list[i].checked;
        }
    }

    //排序
    function sort() {
        var list = $("#tab tr");
        list.each(function (index, tr) {
            if (index > 0) {
                $(tr).children()[1].innerHTML = index;
            }
        })
    }

    function getp(i) {
        let arr = [];
        for (let m = 1; m < 8; m++) {
            arr[m] = document.getElementById('table1').rows[i].cells[m].innerText;
        }
        return arr; //返回该行数据
    }

    function getrow(r) {
        return r.parentNode.parentNode.rowIndex;
    }

    function upda(r) {
        document.getElementById('bu_update').style.display = "block";
        document.getElementById('in_add').style.display = "none";
        var i = getrow(r);
        x = i;
        let arr = getp(i);
        document.getElementById('name').value = arr[1];
        document.getElementById('age').value = arr[2];
        if (arr[3] === "女") {
            document.getElementById("woman").checked = "checked";
        }
        document.getElementById('address').value = arr[4];
        document.getElementById('level').value = arr[5];
        document.getElementById('email').value = arr[6];
        if (arr[7] === "医生") {
            document.getElementById("doctor").checked = "checked";
        }

    }

    function upda1() {
        document.getElementById('name').value = "";
        document.getElementById('age').value = "";
        document.getElementById("man").checked = "checked";
        document.getElementById('address').value = "";
        document.getElementById('level').value = "";
        document.getElementById('email').value = "";
        document.getElementById("user").checked = "checked";

    }

    function update() {
        document.getElementById('table1').deleteRow(x);
        let name = $('#name').val();
        let age = $('#age').val();
        let level = $('#level').val();
        let sex = $('input[name="sex"]:checked').val();
        let ty = $('input[name="ty"]:checked').val();
        let city = $('#city').val();
        let address = $('#address').val();
        let email = $('#email').val();
        let province = $('#province').val();
        let add = province + "-" + city + "-" + address;
        const tab = document.getElementById("table1").insertRow(1);
        if (name === '' || age === '' || level === '' || sex === '') {
            alert("请输入完整");
        } else {
            tab.innerHTML +=
                "<tr>\n" +
                " <td><input type=\"checkbox\" name=\"checkbox\" onclick=\"cancel()\"></td>" +
                "<td>" + name + "</td>\n" +
                "<td>" + age + "</td>" +
                "<td>" + sex + "</td>" +
                "<td>" + add + "</td>" +
                "<td>" + level + "</td>" +
                "<td>" + email + "</td>" +
                "<td>" + ty + "</td>" +
                "<td> <input type=\"button\" class=\"btn btn-info\" value=\"删除\" onclick=\"del(this)\"/>\n" +
                "<input type=\"button\" class=\"btn btn-info\" value=\"修改\" onclick=\"upda(this)\" data-toggle=\"modal\"\n" +
                "data-target=\"#adduser\"/></td>" +
                "</tr>"
        }
        submit3();
    }

    //添加用户
    function change() {
        document.getElementById('in_add').style.display = "block";
        document.getElementById('bu_update').style.display = "none";
        upda1();
    }

    function addname() {
        let name = $('#name').val();
        let age = $('#age').val();
        let level = $('#level').val();
        let sex = $('input[name="sex"]:checked').val();
        let ty = $('input[name="ty"]:checked').val();
        let city = $('#city').val();
        let address = $('#address').val();
        let email = $('#email').val();
        let province = $('#province').val();
        let add = province + "-" + city + "-" + address;
        const tab = document.getElementById("table1");
        if (name === '' || age === '' || level === '' || sex === '') {
            alert("请输入完整");
        } else {
            alert(tab);
            tab.innerHTML +=
                "<tr>\n" +
                " <td><input type=\"checkbox\" name=\"checkbox\" onclick=\"cancel()\"></td>" +
                "<td>" + name + "</td>\n" +
                "<td>" + age + "</td>" +
                "<td>" + sex + "</td>" +
                "<td>" + add + "</td>" +
                "<td>" + level + "</td>" +
                "<td>" + email + "</td>" +
                "<td>" + ty + "</td>" +
                "<td> <input type=\"button\" class=\"btn btn-info\" value=\"删除\" onclick=\"del(this)\"/>\n" +
                "<input type=\"button\" class=\"btn btn-info\" value=\"修改\" onclick=\"upda(this)\" data-toggle=\"modal\"\n" +
                "data-target=\"#adduser\"/></td>" +
                "</tr>"
        }
        submit3();
    }

    function submit3() {
        let name = $('#name').val();
        let age = $('#age').val();
        let level = $('#level').val();
        let sex = $('input[name="sex"]:checked').val();
        let ty = $('input[name="ty"]:checked').val();
        let city = $('#city').val();
        let address = $('#address').val();
        let email = $('#email').val();
        let province = $('#province').val();
        let add = province + "-" + city + "-" + address;
        let data = {
            "name": name,
            "age": age,
            "level": level,
            "sex": sex,
            "type": ty,
            "email": email,
            "address": add
        }

        $.ajax({
            type: "POST",
            url: '/hello',
            data: JSON.stringify(data),
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (a) {
                alert(a);
            },
            error: function () {
            }
        })
    }

    //医生认证
    function submit1(docid) {
        admit(1, docid);
    }

    function submit2(docid) {
        admit(0, docid);
    }

    function admit(isallow, docid) {
        $.ajax({
            type: "POST",
            url: '/admin/submit-certifcinfo',
            contentType: "application/json",
            data: JSON.stringify({
                isallow: isallow,
                docid: docid
            }),
            success: function (rescode) {
                if (rescode == "200")
                    window.location.href="/admin/index"
            },
            error: function () {
            }
        })
    }
</script>
</body>
</html>
